<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pomodoro</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <style>
    button:disabled i {
      color: gray;
    }
  </style>
</head>
<body>
<div id="app" class="container">
  <h2>
    <span>Pomodoro</span>
    <button :disabled="state==='started'" title="start" @click="start()">
      <i class="glyphicon glyphicon-play"></i>
    </button>
    <button :disabled="state!=='started'" title="pause" @click="pause()">
      <i class="glyphicon glyphicon-pause"></i>
    </button>
    <button :disabled="state!=='started' && state !== 'paused'" title="stop" @click="stop()">
      <i class="glyphicon glyphicon-stop"></i>
    </button>
  </h2>
  <h3>{{ title }}</h3>
  <div class="well">
    <div class="pomodoro-timer">
      <span>{{ min }}</span>:<span>{{ sec }}</span>
    </div>
  </div>
  <div class="well" :class="{ 'hidden': pomodoroState === 'work' }">
    <img :src="'http://thecatapi.com/api/images/get?type=gif&size=med&ts=' + timestamp" />
  </div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="script.js"></script>
</body>
</html>